<template>
  <!--  表操作-->
  <div style="padding: 10px 0;margin-top: 10px">
    <el-input style="width: 200px;margin-right: 5px" v-model="formData.sname" placeholder="请输入姓名" clearable/>
    <el-input style="width: 200px;margin-right: 5px" v-model="formData.sid" placeholder="请输入学号" clearable/>
    <el-button type="primary" @click="search">搜索</el-button>
    <el-button type="warning" @click="reset">重置</el-button>
  </div>
  <div style="margin: 10px 0;display: inline-block">
    <el-button style="display: inline-block" type="primary" @click="dialogVisible = true">新增
      <el-icon>
        <CirclePlus/>
      </el-icon>
    </el-button>
    <el-button style="display: inline-block" type="danger" @click="handleDelBatch">批量删除
      <el-icon>
        <Remove/>
      </el-icon>
    </el-button>
    <!--    <el-upload-->
    <!--        v-model:file-list="fileList"-->
    <!--        class="upload-demo"-->
    <!--        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"-->
    <!--        multiple-->
    <!--        :show-file-list="false"-->
    <!--        :on-preview="handlePreview"-->
    <!--        :on-remove="handleRemove"-->
    <!--        :before-remove="beforeRemove"-->
    <!--        :limit="3"-->
    <!--        :on-exceed="handleExceed"-->
    <!--        style="display: inline-block;margin-left: 10px"-->
    <!--    >-->
    <!--      <el-button type="primary">导入<el-icon><Download /></el-icon></el-button>-->
    <!--    </el-upload>-->
    <!--    <el-button style="display: inline-block;margin-left: 10px" type="primary" @click="exp">导出<el-icon><Upload /></el-icon></el-button>-->
  </div>

  <!--  学生表-->
  <el-table :data="tableData" border stripe header-cell-class-name="headerBg" @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="140">
    </el-table-column>
    <el-table-column prop="id" label="学号" width="200">
    </el-table-column>
    <el-table-column prop="grade" label="成绩">
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="success" @click="handleEdit(scope.$index,scope.row)">编辑<i class="el-icon-edit"></i>
        </el-button>
        <el-button type="danger" @click="handleDelete(scope.$index,scope.row)">删除<i class="el-icon-remove"></i>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--  编辑学生-->
  <el-dialog
      v-model="dialogFormVisible"
      title="修改成绩"
      width="30%"
      :before-close="handleClose"
  >
    <el-form :model="form" label-width="120px" style="margin-left: -40px">
      <!--      <el-form-item label="姓名">-->
      <!--        <el-input style="width: 200px;" v-model="form1.name" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="学号">-->
      <!--        <el-input style="width: 200px" v-model="form1.studentId" />-->
      <!--      </el-form-item>-->
      <el-form-item label="成绩">
        <el-input style="width: 200px" v-model="form1.grade"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!--  分页-->
  <!--  <div class="demo-pagination-block">-->
  <!--    <el-pagination-->
  <!--        v-model:current-page="pageNum"-->
  <!--        v-model:page-size="pageSize"-->
  <!--        :page-sizes="[2, 5, 10, 20]"-->
  <!--        :small="small"-->
  <!--        :disabled="disabled"-->
  <!--        :background="background"-->
  <!--        layout="total, sizes, prev, pager, next, jumper"-->
  <!--        :total="0"-->
  <!--        @size-change="handleSizeChange"-->
  <!--        @current-change="handleCurrentChange"-->
  <!--    />-->
  <!--  </div>-->

  <!--新增学生-->
  <el-dialog
      v-model="dialogVisible"
      title="新增学生"
      width="30%"
      :before-close="handleClose"
  >
    <el-form :model="form" label-width="120px" style="margin-left: -40px">
      <!--      <el-form-item label="姓名">-->
      <!--        <el-input style="width: 200px;" v-model="form.name" />-->
      <!--      </el-form-item>-->
      <el-form-item label="学号">
        <el-input style="width: 200px" v-model="form.id"/>
      </el-form-item>
      <el-form-item label="成绩">
        <el-input style="width: 200px" v-model="form.grade"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, reactive, Ref, ref,} from 'vue'
import {ElForm} from 'element-plus'
import axios from "axios";
import CourseStudent from "@/class/CourseStudent";
import {CourseStore} from "@/store";

const myform = ref<InstanceType<typeof ElForm>>()
const coursestore = CourseStore()
const formData = reactive({
  sname: '',
  sid: ''
})
const form: Ref<CourseStudent> = ref<CourseStudent>({
  id: '',
  name: '',
  courseId: coursestore.course_id,
  grade: ''
})
const form1: Ref<CourseStudent> = ref<CourseStudent>({
  id: '',
  name: '',
  courseId: coursestore.course_id,
  grade: ''
});

const current = ref(1)

// 分页
const pageNum = ref(4)
const pageSize = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

// 学生信息表（传入课程id找到
const tableData = ref([]) as any
const Nform = ref([]) as any
const load = async (val: number) => {
  axios.get('/course/getstudent/?cid=' + coursestore.course_id)
      .then(function (res) {
        tableData.value = res.data.data
        console.log(tableData.value)
        for (var i = 0; i < tableData.value.length; i++) {
          Nform.value[i] = tableData.value[i].name
        }
        // console.log(tableData.value[0].name)
        current.value = val
        // console.log(res)
      })
}
onMounted(async () => {
  load(current.value)
})

//单条信息修改
const dialogFormVisible = ref(false)
const handleEdit = (index: number, row: CourseStudent) => {
  dialogFormVisible.value = true
  // console.log("当前id:" + row.id)
  form1.value = row
}
const edit = () => {
  dialogFormVisible.value = false
  axios.put('/scourse', form1.value).then(function (res) {
    console.log("修改的结果" + res)
    load(current.value)
  })
  console.log(form.value.id)
}

//单条信息删除
const handleDelete = (index: number, row: CourseStudent) => {
  axios.post('/teacher/deletstudentbyteacher', {
    cid: coursestore.course_id,
    sid: row.id
  }).then(function (res) {
    load(current.value)
    // alert("删除成功！")
  })
  console.log(index, row.id)
}
//批量删除
// const multipleSelection=ref([])
// const handleDelBatch=()=>{
//   let ids=multipleSelection.value.map(v=>v.id) //扁平化处理，但是报错了
//   axios.delete('/scourse/batch',ids)
//   .then(function (res){
//     load(current.value)
//   })
// }
//保存学生信息
const save = async () => {
  dialogVisible.value = false
  axios.post('/scourse', form.value)
      .then(function (res) {
        console.log(res.data)
        load(current.value)
        form1.value = {
          id: '',
          name: '',
          courseId: coursestore.course_id,
          grade: ''
        }
      })
}

//新增学生窗口
const dialogVisible = ref(false)
const onSubmit = () => {
  console.log('submit!')
}
// 关闭公告窗
// const handleClose = (done: () => void) => {
//   ElMessageBox.confirm('您确定已经保存？')
//       .then(() => {
//         done()
//       })
//       .catch(() => {
//         // catch error
//       })
// }

// 输入
const sname = ref("")
const sid = ref("")
//搜索
const arr = ref([])
const search = (() => {
  // console.log(Nform.value)
  console.log(sname.value)
  if (sname.value != '') {  //输入不为空
    //需要单独提取出json文件的name/id属性
    // 使用过滤器，查看tabledata里的name属性是否包含输入的值
    //tableData.value为表格数据的值
    // console.log(arr.value)
    tableData.value = tableData.value.filter((item) => item.value.includes(sname.value))
    console.log(arr.value)
    load(current.value)
  }
})

//重置
const reset = () => {
  sname.value = "",
      sid.value = ""

  load(current.value)
}
</script>

<style>
.headerBg {
  background-color: #eee !important;
}
</style>
